<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
</head>
<body>
<!-- 	http://stackoverflow.com/questions/11988415/what-is-the-jsf-resource-library-for-and-how-should-it-be-used -->
	<ui:composition template="/templates/template.xhtml">
		<ui:define name="title">Gestionar Movimientos</ui:define>
		<ui:define name="body">
			<h:form id="moviForm">
				<rich:panel columns="4">
					<f:facet name="header">
						<h:outputText value="Gestionar movimientos de caja" />
					</f:facet>



					<div class="ui-widget ui-helper-clearfix">

						<ul id="gallery"
							class="gallery ui-helper-reset ui-helper-clearfix">
							<li class="ui-widget-content ui-corner-tr">
								<h5 class="ui-widget-header">High Tatras</h5> <img
								src="resources/img/icon-banco.gif"
								alt="The peaks of High Tatras" width="96" height="72"></img> <a
								href="resources/img/icon-banco.gif" title="View larger image"
								class="ui-icon ui-icon-zoomin">View larger</a> <a
								href="link/to/trash/script/when/we/have/js/off"
								title="Delete this image" class="ui-icon ui-icon-trash">Delete
									image</a>
							</li>
							<li class="ui-widget-content ui-corner-tr">
								<h5 class="ui-widget-header">High Tatras 2</h5> <img
								src="resources/img/icon-banco.gif"
								alt="The chalet at the Green mountain lake" width="96"
								height="72"></img> <a href="resources/img/icon-banco.gif"
								title="View larger image" class="ui-icon ui-icon-zoomin">View
									larger</a> <a href="link/to/trash/script/when/we/have/js/off"
								title="Delete this image" class="ui-icon ui-icon-trash">Delete
									image</a>
							</li>
							<li class="ui-widget-content ui-corner-tr">
								<h5 class="ui-widget-header">High Tatras 3</h5> <img
								src="resources/img/icon-banco.gif" alt="Planning the ascent"
								width="96" height="72"></img> <a
								href="resources/img/icon-banco.gif" title="View larger image"
								class="ui-icon ui-icon-zoomin">View larger</a> <a
								href="link/to/trash/script/when/we/have/js/off"
								title="Delete this image" class="ui-icon ui-icon-trash">Delete
									image</a>
							</li>
							<li class="ui-widget-content ui-corner-tr">
								<h5 class="ui-widget-header">High Tatras 4</h5> <img
								src="resources/img/icon-banco.gif" alt="On top of Kozi kopka"
								width="96" height="72"></img> <a
								href="resources/img/icon-banco.gif" title="View larger image"
								class="ui-icon ui-icon-zoomin">View larger</a> <a
								href="link/to/trash/script/when/we/have/js/off"
								title="Delete this image" class="ui-icon ui-icon-trash">Delete
									image</a>
							</li>
						</ul>

						<div id="trash" class="ui-widget-content ui-state-default">
							<h4 class="ui-widget-header">
								<span class="ui-icon ui-icon-trash">Trash</span> Trash
							</h4>
						</div>

					</div>





				</rich:panel>
			</h:form>
			<f:verbatim>

				<script language="javascript">//<![CDATA[
				


					$(function() {
					    // there's the gallery and the trash
					    var $gallery = $( "#gallery" ),
					      $trash = $( "#trash" );
					 
					    // let the gallery items be draggable
					    $( "li", $gallery ).draggable({
					      cancel: "a.ui-icon", // clicking an icon won't initiate dragging
					      revert: "invalid", // when not dropped, the item will revert back to its initial position
					      containment: "document",
					      helper: "clone",
					      cursor: "move"
					    });
					 
					    // let the trash be droppable, accepting the gallery items
					    $trash.droppable({
					      accept: "#gallery > li",
					      activeClass: "ui-state-highlight",
					      drop: function( event, ui ) {
					        deleteImage( ui.draggable );
					      }
					    });
					 
					    // let the gallery be droppable as well, accepting items from the trash
					    $gallery.droppable({
					      accept: "#trash li",
					      activeClass: "custom-state-active",
					      drop: function( event, ui ) {
					        recycleImage( ui.draggable );
					      }
					    });
					 
					    // image deletion function
					    var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Recycle this image' class='ui-icon ui-icon-refresh'>Recycle image</a>";
					    function deleteImage( $item ) {
					      $item.fadeOut(function() {
					        var $list = $( "ul", $trash ).length ?
					          $( "ul", $trash ) :
					          $( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash );
					 
					        $item.find( "a.ui-icon-trash" ).remove();
					        $item.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
					          $item
					            .animate({ width: "48px" })
					            .find( "img" )
					              .animate({ height: "36px" });
					        });
					      });
					    }
					 
					    // image recycle function
					    var trash_icon = "<a href='link/to/trash/script/when/we/have/js/off' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>";
					    function recycleImage( $item ) {
					      $item.fadeOut(function() {
					        $item
					          .find( "a.ui-icon-refresh" )
					            .remove()
					          .end()
					          .css( "width", "96px")
					          .append( trash_icon )
					          .find( "img" )
					            .css( "height", "72px" )
					          .end()
					          .appendTo( $gallery )
					          .fadeIn();
					      });
					    }
					 
					    // image preview function, demonstrating the ui.dialog used as a modal window
					    function viewLargerImage( $link ) {
					      var src = $link.attr( "href" ),
					        title = $link.siblings( "img" ).attr( "alt" ),
					        $modal = $( "img[src$='" + src + "']" );
					 
					      if ( $modal.length ) {
					        $modal.dialog( "open" );
					      } else {
					        var img = $( "<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />" )
					          .attr( "src", src ).appendTo( "body" );
					        setTimeout(function() {
					          img.dialog({
					            title: title,
					            width: 400,
					            modal: true
					          });
					        }, 1 );
					      }
					    }
					 
					    // resolve the icons behavior with event delegation
					    $( "ul.gallery > li" ).click(function( event ) {
					      var $item = $( this ),
					        $target = $( event.target );
					 
					      if ( $target.is( "a.ui-icon-trash" ) ) {
					        deleteImage( $item );
					      } else if ( $target.is( "a.ui-icon-zoomin" ) ) {
					        viewLargerImage( $target );
					      } else if ( $target.is( "a.ui-icon-refresh" ) ) {
					        recycleImage( $item );
					      }
					 
					      return false;
					    });
					  });
					
				//]]>







					</script>






			</f:verbatim>

		</ui:define>
	</ui:composition>

</body>
</html>
